<!-- 地图 init 方法测试，loader 缓存测试 -->
<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Map Demo</title>
    <link
      rel="stylesheet"
      href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"
    />
    <style>
      #map-container {
        width: 400px;
        height: 300px;
        border: 1px solid #ccc;
      }

      .map-wrapper {
        display: flex;
        flex-wrap: wrap;
      }

      .map-item {
        width: 45%;
        height: 600px;
        margin: 10px;
        border: 1px solid #ccc;
      }

      #huawei-map {
        width: 100%;
        height: calc(100% - 24px);
      }

      #google-map {
        width: 100%;
        height: calc(100% - 24px);
      }

      #amap-map {
        width: 100%;
        height: calc(100% - 24px);
      }

      .map-item-title {
        display: flex;
        justify-content: center;
      }
    </style>
  </head>

  <body>
    <div class="map-wrapper">
      <div class="map-item">
        <div class="map-item-title">华为地图</div>
        <div id="huawei-map"></div>
      </div>
      <div class="map-item">
        <div class="map-item-title">谷歌地图</div>
        <div id="google-map"></div>
      </div>
      <div class="map-item">
        <div class="map-item-title">高德地图</div>
        <div id="amap-map"></div>
      </div>
    </div>

    <script type="module">
      import { createMap, init } from "../src/index";

      (async () => {
        try {
          const YOUR_HUAWEI_MAP_API_KEY =
            "DgEDAF4hteXC0Zy9zEgKIGXiALRk5J81YmepSE98ByZVMQU+AL+NbgIbgXhcbbXHCTkFmmqbHRuSWUx6qRi3xcXozPZE0NJlpkeobg==";
          const YOUR_AMAP_API_KEY =
            "6f7f9957bd5b32dd518eb03f5910f42c";
          const YOUR_GOOGLE_MAP_API_KEY =
            "AIzaSyAR1VWmtaFPFaool39iVbPueS7DVRAn39k";

          const initCommonMapOption = {
            center: { lat: 39.904989, lng: 116.405285 },
            zoom: 8,
          };
          const huaweiMap = await init({
            container: document.getElementById("huawei-map"),
            mapProvider: "huawei",
            apiKey: YOUR_HUAWEI_MAP_API_KEY,
            ...initCommonMapOption,
            zoom: 13,
            // language: "ENG",
          });
          const amapMap = await init({
            container: document.getElementById("amap-map"),
            mapProvider: "amap",
            apiKey: YOUR_AMAP_API_KEY,
            securityJsCode: "8215d7d759a5b8c28827e3f89a65d2a4",
            version: "2.0",
            ...initCommonMapOption,
            zoom: 8,
          });
          const googleMap = await init({
            container: document.getElementById("google-map"),
            mapProvider: "google",
            apiKey: YOUR_GOOGLE_MAP_API_KEY,
            ...initCommonMapOption,
          });

          const div = document.createElement("div");
          div.style.backgroundColor = "#95b223";
          const size = 32;
          div.style.width = div.style.height = size + "px";
          div.style.borderRadius = size / 2 + "px";
          div.style.lineHeight = size + "px";
          div.style.color = "#ffffff";
          div.style.fontSize = "14px";
          div.style.textAlign = "center";

          const div2 = document.createElement("div");
          div2.style.backgroundColor = "green";
          div2.style.width = div2.style.height = size + "px";
          div2.style.borderRadius = size / 2 + "px";
          div2.style.lineHeight = size + "px";
          div2.style.color = "#ffffff";
          div2.style.fontSize = "14px";
          div2.style.textAlign = "center";

          const div3 = document.createElement("div");
          div3.style.backgroundColor = "blue";
          div3.style.width = div3.style.height = size + "px";
          div3.style.borderRadius = size / 2 + "px";
          div3.style.lineHeight = size + "px";
          div3.style.color = "#ffffff";
          div3.style.fontSize = "14px";
          div3.style.textAlign = "center";
          const addMarkerClusterOptions = {
            points: [
              {
                weight: 8,
                lng: 116.506647,
                lat: 39.795337,
                markerOptions: {
                  // icon:
                  //   "//a.amap.com/jsapi_demos/static/images/red.png",
                  label: {
                    content: "bj",
                    fontSize: "16px",
                    color: "#ffc6cc",
                  },
                },
              },
              { weight: 1, lng: 116.843352, lat: 40.377362 },
              { weight: 1, lng: 116.637122, lat: 40.324272 },
              { weight: 1, lng: 116.105381, lat: 39.937183 },
              { weight: 1, lng: 116.653525, lat: 40.128936 },
              { weight: 1, lng: 116.486409, lat: 39.921489 },
              { weight: 1, lng: 116.658603, lat: 39.902486 },
              { weight: 1, lng: 116.338033, lat: 39.728908 },
              { weight: 1, lng: 116.235906, lat: 40.218085 },
              { weight: 1, lng: 116.366794, lat: 39.915309 },
              { weight: 1, lng: 116.418757, lat: 39.917544 },
              { weight: 1, lng: 116.139157, lat: 39.735535 },
              { weight: 1, lng: 116.195445, lat: 39.914601 },
              { weight: 1, lng: 116.310316, lat: 39.956074 },
              { weight: 1, lng: 116.286968, lat: 39.863642 },
            ],
            singlePointIcon:
              "//a.amap.com/jsapi_demos/static/images/orange.png",
            singlePointLabel: {
              content: "1",
              color: "#fff",
            },
            clusterPointIcon: "//a.amap.com/jsapi_demos/static/images/blue.png",
            clusterPointLabel: { content: div, color: "#fff" },
            clusterPointIntervalList: [
              {
                maxNumber: 2,
                clusterPointIcon:
                  "//a.amap.com/jsapi_demos/static/images/blue.png",
                clusterPointLabel: { content: div },
              },
              {
                maxNumber: 4,
                // clusterPointLabel: { content: div2 },
                clusterPointIcon: {
                  url: "//a.amap.com/jsapi_demos/static/images/green.png",
                  size: [32, 32],
                },
              },
              {
                maxNumber: 6,
                // clusterPointLabel: { content: div3 },
                clusterPointIcon: {
                  url: "//a.amap.com/jsapi_demos/static/images/red.png",
                  size: [32, 32],
                },
              },
            ],
            amapClusterRendererFunc: function (context) {
              // 创建自定义的聚类点容器
              const clusterDiv = document.createElement("div");
              clusterDiv.style.cssText = `
                background-color: #4285f4;
                border: 2px solid #fff;
                border-radius: 50%;
                color: white;
                font-weight: bold;
                text-align: center;
                line-height: 40px;
                width: 40px;
                height: 40px;
                box-shadow: 0 2px 6px rgba(0,0,0,0.3);
                font-size: 14px;
                cursor: pointer;
                transition: all 0.3s ease;
              `;
              // 根据聚类点数量设置不同的样式
              const count = context.count;
              if (count <= 2) {
                clusterDiv.style.backgroundColor = "#4CAF50"; // 绿色
                clusterDiv.style.fontSize = "12px";
              } else if (count <= 4) {
                clusterDiv.style.backgroundColor = "#FF9800"; // 橙色
                clusterDiv.style.fontSize = "14px";
              } else if (count <= 8) {
                clusterDiv.style.backgroundColor = "#F44336"; // 红色
                clusterDiv.style.fontSize = "16px";
              } else {
                clusterDiv.style.backgroundColor = "#9C27B0"; // 紫色
                clusterDiv.style.fontSize = "18px";
                clusterDiv.style.width = "50px";
                clusterDiv.style.height = "50px";
                clusterDiv.style.lineHeight = "50px";
              }
              // 设置数量文本
              clusterDiv.innerHTML = count.toString();
              // content 也可以是 HTMLElement
              context.marker.setContent(clusterDiv);
            },
            googleClusterRendererFunc: function render(context) {
              // 创建自定义的聚类点容器
              const clusterDiv = document.createElement("div");
              clusterDiv.style.cssText = `
                background-color: #4285f4;
                border: 2px solid #fff;
                border-radius: 50%;
                color: white;
                font-weight: bold;
                text-align: center;
                line-height: 40px;
                width: 40px;
                height: 40px;
                box-shadow: 0 2px 6px rgba(0,0,0,0.3);
                font-size: 14px;
                cursor: pointer;
                transition: all 0.3s ease;
              `;
              // 根据聚类点数量设置不同的样式
              const count = context.count;
              if (count <= 2) {
                clusterDiv.style.backgroundColor = "#4CAF50"; // 绿色
                clusterDiv.style.fontSize = "12px";
              } else if (count <= 4) {
                clusterDiv.style.backgroundColor = "#FF9800"; // 橙色
                clusterDiv.style.fontSize = "14px";
              } else if (count <= 8) {
                clusterDiv.style.backgroundColor = "#F44336"; // 红色
                clusterDiv.style.fontSize = "16px";
              } else {
                clusterDiv.style.backgroundColor = "#9C27B0"; // 紫色
                clusterDiv.style.fontSize = "18px";
                clusterDiv.style.width = "50px";
                clusterDiv.style.height = "50px";
                clusterDiv.style.lineHeight = "50px";
              }
              // 设置数量文本
              clusterDiv.innerHTML = count.toString();
              // 创建 Marker 对象
              const marker = new google.maps.marker.AdvancedMarkerElement({
                position: context.position, // 使用 obj.position
                content: clusterDiv,
              });
              return marker;
            },
            huaweiClusterRendererFunc: function renderClusterMarker(markers) {
              let count = markers.length;
              let icon = {
                url: "",
                anchor: [0.5, 0.5],
                anchorUnit: "fraction",
              };
              let label = {
                text: "",
                color: "#000",
                strokeColor: "white",
                strokeWeight: 2,
              };
              label.text = count.toString();
              if (count <= 4) {
                icon.url = "//a.amap.com/jsapi_demos/static/images/red.png";
              } else if (count < 10 && count > 4) {
                icon.url = "//a.amap.com/jsapi_demos/static/images/green.png";
              } else {
                icon.url = "//a.amap.com/jsapi_demos/static/images/blue.png";
              }
              return {
                label,
                icon,
              };
            },
          };
          amapMap.addMarkerCluster(addMarkerClusterOptions);
          googleMap.addMarkerCluster(addMarkerClusterOptions);
          huaweiMap.addMarkerCluster(addMarkerClusterOptions);
        } catch (error) {
          console.error("Map initialization failed:", error);
        }
      })();
    </script>
  </body>
</html>
